<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<style>
			.red {
				color: red;
			}
			
			.textsize {
				font-size: 20px;
			}
		</style>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">

			<p>{{ msg }}</p>
			<p v-text="msg"></p>

			<p>{{ name }}</p>
			<!--	双向绑定用v-model,单向绑定用v-bind;-->
			<input type="text" v-model="name" />
			<input type="text" :value="name" />

			<input type="button" value="OK" v-on:click="toast(name)" />

			<input type="button" v-bind:value="info" v-on:click="show" />
			<h1 v-if="flag">sdfsdfsdfsd</h1>
			<h1 v-show="flag">234234234234</h1>

			<h1 v-if="flag">VIP用户</h1>
			<h1 v-else>普通用户</h1>

			<template v-for="(item,index) in arr1">
				<h1>{{ index}}:{{ item }}</h1>
			</template>

			<ol v-for="(value,key,index) in jsonObj">
				<li> key:{{key}} ----- value:{{ value }} ----- index:{{ index }}</li>
			</ol>

			<!--checkbox,数据双向绑定；-->
			<div v-for="item in jsonArray" :key="item.id">
				<input type="checkbox" v-model="item.selected" value="item.id" />{{item.name}}
			</div>

			<!--样式绑定；-->

			<h1 class="red textsize">1231231</h1> 属性绑定后，类名，必须使用单引号；
			<h1 :class="['red','textsize']">1231231-sdf</h1> 三元表达式；
			<h1 :class="[flag?'red':'','textsize']">1231231-sdf</h1> 使用对象，设置是否加载class
			<h1 :class="[{'red':flag},'textsize']">1231231-sdf</h1>
			<input type="button" value="测试methods" @click = "func" />
		</div>

		<script>
			var app = new Vue({
				el: "#app",
				data: {
					msg: "sdfsfsdf",
					name: "",
					flag: true,
					info: "显示",
					arr1: ["sdf", "123", "盛开的积分"],
					jsonObj: {
						"id": 10,
						"name": "学已刚"
					},
					jsonArray: [{
						"id": 1,
						"name": "篮球",
						"selected": false
					}, {
						"id": 2,
						"name": "排球",
						"selected": false
					}, {
						"id": 3,
						"name": "羽毛球",
						"selected": false
					}]
				},
				methods: {
					toast(info) {
						alert(info)
					},
					show() {
						this.flag = !this.flag
						this.info = this.flag ? "显示" : "隐藏"
					},
					func(){
						this.toast("sdfsdf")
					}
				}

			});
			
			//不能再实例化后，新增,不能 修改；
			app.$options.methods.func  = function() {
				app.toast("next方法");
			}
			//data中的参数可以修改；
			app.$data.name = 'sdfsdf';
			
			
		</script>
	</body>

</html>